<template>
	<view class="search">
		<u-search 
			placeholder="输入任务编号" 
			v-model="keyword"
			:show-action="action"
			:action-style="{color:'#19B1B8'}"
			:focus="true"
			height="68"
			bg-color="#f1f1f1"
			border-color="#eeeeee"
			search-icon-color="#AEAEAE"
			placeholder-color="#AEAEAE"
			:disabled="disabled"
			@search="searchTask()"
			@custom="searchTask()"
			@click="goSearchPage"
			@change="change"
		></u-search>
	</view>
</template>

<script>
	import { mapActions } from 'vuex'
	export default {
		props: ['disabled'],
		data (){
			return {
				action: false,
				keyword: ''
			}
		},
		methods: {
			...mapActions(['myTask']),
			searchTask (){
				this.myTask(this.keyword)
			},
			// 输入文字，显示搜索按钮
			change (e){
				this.action = !!e
			},
			// 跳转搜索页
			goSearchPage (){
				this.$Router.push({name: 'search'})
			}
		}
	}
</script>

<style lang="scss">
	.search{
		padding: 24rpx;
		background-color: #fff;
		/deep/.u-content{
			padding: 0 28rpx;
		}
	}
</style>